iT邦幫忙

2025 iThome 鐵人賽

DAY 1
4
Modern Web

關於那些有趣的 CSS 效果系列 第 1

( Day 1 ) 從 CSS 開始,學會觀察世界的節奏

  • 分享至 

  • xImage
  •  

大家好,我是 OXXO ( OXXO.STUDIO ),今年第 N 次參戰 iT 邦幫忙鐵人賽,我決定選擇了一個自己最熟悉、也最有熱情的主題:「關於那些有趣的 CSS 效果」,不過,我想這麼成熟的技術,可能沒有什麼人想寫了吧!( 苦笑 )

從 CSS 開始,學會觀察世界的節奏

累積 200 篇 CSS 教學的背後

這幾年來,我在 OXXO.STUDIOSTEAM 教育學習網 裡撰寫了大量 CSS 教學,範圍涵蓋基礎排版、 RWD 到動畫與進階互動技巧,這次我將從自己撰寫的 200 多篇 CSS 教學文章中,精選出至少 30 個有趣的效果,逐篇進行重新整理、補充與發表,不需要任何 JS 或框架,只需要 CSS 和一點點勇氣,就能探索各種實用又奇幻的特效技巧。

效果預告:跑馬燈、電子時鐘、翻牌動畫、漸層色星空背景、雙色文字、流動邊框、探照燈動畫、水波紋、立體碼表、視差滾動、愛心爆炸 hover 效果、純 CSS 實作的進度條...等。

從 CSS 開始,學會觀察世界的節奏

AI 呢?AI 不是也能寫 CSS 嗎?

最近只要講起我在寫 CSS 教學,很多人就會說:「用 AI 就可以生成 CSS 了啊!」「還在寫 CSS,AI 就可以幫你寫啦!」沒錯,AI 確實能幫助我們快速產出可用的 CSS,特別是語法、基礎動畫、或是常見的 layout 排版,都可以輕鬆產生!

但是,身為一名和無數專案搏鬥過的前端工程師,我可以很負責任地說:

AI 寫 CSS 是輔助,但它不能代替你對畫面節奏與語意結構的理解。

我觀察到 AI 寫 CSS 的幾個真實弱點

  • 視覺判斷力低,無法掌握畫面節奏

    AI 無法「看見」實際畫面,也不知道你設計系統的畫面、對象、比例與色彩感受。

  • 命名與結構鬆散,維護地獄的起點

    AI 容易產出沒有語意的 class 結構,有時甚至完全不考慮命名規範、可維護性,或者目前使用的 CSS 架構

  • 缺乏真實環境測試意識

    AI 不知道不同瀏覽器或解析度的影響,也不知道各種字體 baseline 對 line-height 的差異 ( 特別是中日韓字體 ),更不會特別去處理多語系或無障礙需求。

  • 過度保守,結果「堆疊」而非「設計」

    AI 通常是「以防萬一」來寫 CSS ( 因為不知道使用情境 ),所以常常會加了一堆實際上不需要的樣式。

AI 並非無用,它有它的位置

雖然講了很多 AI 的缺點,但對於撰寫過許多生成式 AI 教學的我來說,也想幫 AI 稍微平反一下,事實上,對於熟悉 CSS 的人而言,AI 是很棒的輔助工具,例如:

  • 快速產生動畫語法、語法拼接
  • 協助補上可能會出錯的缺漏、或解釋已經忘記的 CSS 模組用法
  • 重構舊樣式、產出 prototype、驗證邏輯流程

因此之前提到 AI 的缺點,其實反映了 AI 只是工具,AI 並不是並架構師或設計師,若我們已經知道要什麼、限制在哪裡,它就能幫我們省下不少時間,這時 AI 的定義就不是「能不能寫出完美 CSS」,而是「能不能幫我們省下體力、加快開發速度、讓我們更專注在細節」。

AI 不會取代你,但會讓懂 CSS 的人變得更強。

從 CSS 開始,學會觀察世界的節奏

鐵人正式啟動!每天一個 CSS 效果!

CSS 真正的強大不只是語法,而是「讓畫面有節奏、有呼吸感、有互動美學」的能力。這些並不是單靠生成語法就能達到的,而是需要對設計、排版、結構、可維護性都有一定程度的理解才能達成。

這次的鐵人賽,我希望能透過這 30 篇文章,重新發現 CSS 的樂趣、價值與潛力!

今天這篇是暖身介紹,明天開始會正式進入每日主題,歡迎大家一起留言交流、分享心得,明天見!😎

其他

如果想了解更多 CSS 技巧,可以參考我寫的:CSS 教學大全


下一篇
( Day 2 ) 純 CSS 製作圓餅圖
系列文
關於那些有趣的 CSS 效果35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言